<template>
    <div class="container-fluid">
        <div class="row-fluid">
            <div class="col-sm-2">
            </div>
            <div class="col-sm-8">
                <div class="row">
                    <div class="col-sm-4" style="border:solid 1px;width: 200px;" >
                        <div class="list-group">

                            <a href="#" :class="['list-group-item', { active: item === selectedData }]"
                                v-for="item in leftData" @click="choiceRepo(item, 1)" :title="item" @name="item">
                                {{ item }}
                            </a>

                        </div>
                    </div>
                    <div class="col-sm-2">
                        <div class="row">
                            <button class="btn btn-default" type="button" @click="collectRepo">&gt;&gt;</button>
                            <br /><br /><br /><br /><br />
                        </div>
                        <div class="row">
                            <button class="btn btn-default" type="button" @click="uncollectRepo">&lt;&lt;</button>
                            <br /><br /><br /><br /><br />
                        </div>
                        <div class="row" style="height: 200px;padding-top: 150px;">
                            <button class="btn btn-primary" type="button" @click="ok">OK</button>
                        </div>
                    </div>
                    <div class="col-sm-4" style="border:solid 1px;width: 200px;">
                        <div class="list-group">
                            <a href="#" :class="['list-group-item', { active: item === selectedData }]"
                                v-for="item in rightData" @click="choiceRepo(item, 2)" :title="item" @name="item">
                                {{ item }}
                            </a>
                        </div>
                    </div>
                </div>
                <div class="row" style="width: 600px;margin-top:25px;">
                    <textarea  id="emailContent"  v-html=emailContent />
                </div>
            </div>
            <div class="col-sm-2">
            </div>
        </div>
    </div>
</template>
  <script>
  const axios = require('axios');
export default ({
    name: 'collectInfo',
    data() {
        return {
            leftData: [],
            rightData: [],
            selectedData: "",
            choiceType: 0, //0 未选中选项 1 选中左侧选项 2选中右侧选项
            emailContent: ""
        }
    },
    created() {
        var vm = this;
        this.emailContent = "";
        vm.leftData = [];
        vm.rightData = [];
        vm.getleftData();
        vm.getrightData();
    },
    methods: {
        getleftData() {
            var vm = this;
            //vm.leftData = ["smartIDE", "GetSmartIDECodeList_Demo", "smartide-springboot-template", "SmartIDE-iTop"];
            axios
                .get("/api/leftData/smartIDE", {})
                .then(res => {
                    if (res.status == 200) {
                        vm.leftData=res.data;
                    }
                })
                .catch(err => {
                    console.log('Error')
                });
        },
        getrightData() {
            var vm = this;
            vm.rightData = [];
            axios
                .get("/api/rightData", {
                })
                .then(res => {
                    if (res.status == 200) {
                         vm.rightData=res.data;
                    }
                })
                .catch(err => {
                    console.log('Error')
                });
        },
        choiceRepo(repo, choiceType) {
            var vm = this;
            if (repo == null || repo == "" || repo == undefined)
                return;
            vm.selectedData = "";
            vm.selectedData = repo;
            vm.choiceType = choiceType;
            console.log(vm.selectedData);
        },
        collectRepo() {
            var vm = this;
            if (vm.selectedData == "" || vm.selectedData == null || vm.selectedData == undefined)
                return;
            if (vm.choiceType == 2)
                return;
            axios
                .get("/api/collectrepo/"+vm.selectedData, {
                })
                .then(res => {
                    if (res.status == 200 && res.data == true) {
                        vm.leftData.splice(vm.leftData.indexOf(vm.selectedData), 1);
                        vm.rightData.push(vm.selectedData);
                        vm.selectedData = "";
                        vm.choiceType = 0;
                    }
                })
                .catch(err => {
                    console.log('Error')
                });
            
        },
        uncollectRepo() {
            var vm = this;
            if (vm.selectedData == "" || vm.selectedData == null || vm.selectedData == undefined)
                return;
            if (vm.choiceType == 1)
                return;
            axios
                .get("/api/uncollectrepo/"+vm.selectedData, {
                })
                .then(res => {
                    if (res.status == 200 && res.data == true) {
                        vm.rightData.splice(vm.rightData.indexOf(vm.selectedData), 1);
                        vm.leftData.push(vm.selectedData);
                        vm.selectedData = "";
                        vm.choiceType = 0;
                    }
                })
                .catch(err => {
                    console.log('Error')
                });
            
        },
        ok() {
            var vm = this;
            axios
                .get("/api/emailContent/smartIDE", {
                })
                .then(res => {
                    if (res.status == 200) {
                        vm.emailContent = res.data;
                    }
                })
                .catch(err => {
                    console.log('Error')
                });
        }
    }
});
</script>
<style>
/*@import url("https://www.bootcss.com/p/layoutit/css/bootstrap-combined.min.css");*/
@import "../assets/css/bootstrap.css";
.list-group {
    max-width: 200px;
    padding-left: 0;
    margin-left: -15px;
    margin-right: -15px;
    height: 400px;
    overflow-y: auto;
}

button.list-group-item {
    width: 100%;
    text-align: left;
}

a.list-group-item,
button.list-group-item {
    color: #555;
}

.list-group-item {
    position: relative;
    display: block;
    padding: 10px 5px;
    margin-bottom: -1px;
    background-color: #fff;
    text-align: left;
    overflow: hidden;
    border: none;
}

.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
    z-index: 2;
    color: #fff;
    background-color: #337ab7;
    border-color: #337ab7;
}

a {
    color: #337ab7;
    text-decoration: none;
}

#emailContent {
    
    /* height: 200px; */
    width:100%;
    min-height: 200px;
    max-height: 300px;
    text-align: left;
    overflow-y: auto;
    resize: none;
}
</style>
